<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/Sort.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="Sort" style="display:none">
    <el-container>
      <el-header>
        Header
      </el-header>
      <el-main>
        <el-tabs v-model="Type" tab-position="left" @tab-click="ChicSort">
          <el-tab-pane v-for="sort in sorts" :label="sort.name" :name="sort.name">
            <div class="sor-product" v-for="good in goods">
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="sor-pro-img">
                    <img :src="good.img" alt="">
                  </div>
                </el-col>
                <el-col :span="18" class="sor-pro-content">
                  <div class="sor-pro-title">{{good.name}}</div>
                  <div class="sor-pro-price">￥{{good.price}}</div>
                </el-col>
              </el-row>
            </div>
            <div style="text-align:center">
              <el-button v-if="!AllLoaded" @click.nativ="loadmore" type="text" style="font-size:12px;">加载更多</el-button>
            </div>
            <div v-if="AllLoaded" style="font-size: 12px;color:#909399;margin:5px 0px;text-align:center">已全部加载完毕</div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <div class="footer">
          <ul>
            <li>
              <div class="foo-icon f-p1"></div>
              <div class="foo-name">商店</div>
            </li>
            <li>
              <div class="foo-icon f-p2"></div>
              <div class="foo-name">分类</div>
            </li>
            <li>
              <div class="foo-icon f-p3"></div>
              <div class="foo-name">玫瑰花</div>
            </li>
            <li>
              <div class="foo-icon f-p4"></div>
              <div class="foo-name">购物车</div>
            </li>
            <li>
              <div class="foo-icon f-p5"></div>
              <div class="foo-name">个人中心</div>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#Sort",
    data: function() {
      return {
        AllLoaded: true,
        sorts: [
          {
            id: 1,
            name: "分类1",
          },
          {
            id: 2,
            name: "分类2",
          },
          {
            id: 3,
            name: "分类3",
          },
          {
            id: 4,
            name: "分类4",
          }
        ],
        goods: [
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
          {
            id: 3,
            img: "./images/goods/logo.png",
            price: 333.0,
            name: 'SHIEIDO资生堂 安耐晒ANESSA 2018新款'
          },
        ]
      }
    },
    methods: {
      ChicSort: function(tab){
        let Mytype = tab.label;

      },
      loadmore(){
        console.log("loadmore");
        this.goods.push.apply(this.goods,data);
        console.log(data);
        console.log(this.goods);
        // axios.get("")
        // .then((res) => {
        //   this.goods.push(res.data);
        // })
        // .catch((err) => {
        //   //如果没有数据返回会被err捕捉的话，如果没有捕捉错误，在then里进行判断是否有数据返回
        // 全部记载完毕 or 加载出错？
        //   this.AllLoaded = true
        // })
      }
    },
    computed: {
      goodsSort: function(){
        var myType = this.type;
        return this.goods.filter(function(elem){
          return elem.type == myType
        })
      },
      Type: function(){
        return this.sorts[2].name;
      }
    },
    mounted: function () {
      document.getElementById('Sort').style.display = 'block';
      document.getElementById('appLoading').style.display = 'none';
      this.$nextTick(function () {
        this.$messagebox.alert(this.Type)
        let id = this.Type;
        // axios.get('/sort/' + id)
        //       .then((res)=>{
        //         this.goods = res.data.data
        //       })
        //       .catch((err) => {
        //         this.$messagebox.alert("加载失败");
        //       })
      })
    }
  })
</script>

</html>
